<template>
  <div id="supplierAppraiseDiv">
    <Splitpanes>
      <Pane size="50">
        <vxe-toolbar perfect>
          <template #buttons>
            <!-- <vxe-input v-model="searchRptCampusForm.searchValue" @keyup="keyupRptCampusEnter" @search-click="findRptCampusAreaList()" @clear="findRptCampusAreaList" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" style="width: 180px"></vxe-input> -->
            <vxe-button :loading="cloading" @click="findRptCampusAreaList" type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新"></vxe-button>
            <vxe-button @click="deleteBatchRptCampus" type="text" icon="vxe-icon-delete" class="button-red" content="删除"></vxe-button>
            <div class="msgDiv">
              双击移除</div>
          </template>
        </vxe-toolbar>
        <div class="tableBody">
          <vxe-table ref="rptCampusTableRef" class="mytable-scrollbar supplierTableClazz" border="inner" align="left" height="auto" :data="rptCampusList" :loading="cloading" @cell-dblclick="rptCampusRowClick" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
            <vxe-column type="checkbox" width="30"></vxe-column>
            <vxe-column type="seq" title="序号" width="30"></vxe-column>
            <vxe-column field="rptGroup" title="报告单元编码"> </vxe-column>
            <vxe-column field="rptGroupName" title="报告单元名称"></vxe-column>
          </vxe-table>
        </div>
      </Pane>
      <Pane size="50">
        <vxe-toolbar perfect>
          <template #buttons>
            <vxe-input style="width: 180px" v-model="searchRptGroupForm.searchValue" @clear="findRptGroupList" @keyup="keyupRptGroupEnter" @search-click="findRptGroupList()" type="search" clearable class="vxeInputSearch" placeholder="关键字查询"></vxe-input>
            <vxe-button :loading="rloading" @click="findRptGroupList" type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新"></vxe-button>
            <div class="msgDiv">
              双击添加</div>
          </template>
        </vxe-toolbar>
        <div class="rightTable">
          <vxe-table ref="rptGroupTableRef" class="mytable-scrollbar supplierTableClazz" border="inner" align="left" height="auto" :data="rptGroupList" :loading="rloading" @cell-dblclick="rptGroupRowClick" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
            <vxe-column type="seq" title="序号" width="30"></vxe-column>
            <vxe-column field="rptGroup" title="项目编号"></vxe-column>
            <vxe-column field="rptGroupName" title="项目名称">
            </vxe-column>

          </vxe-table>
        </div>
      </Pane>
    </Splitpanes>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import moment from 'moment';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示
import { isEmpty } from 'lodash';
defineExpose({ initPage });
let sltCampusArea = null;
let rptCampusList: any = reactive([]);
let rptGroupList: any = reactive([]);
let cloading = ref(false);
let rloading = ref(false);
let searchRptCampusForm = {
  searchValue: ''
};
let searchRptGroupForm = {
  searchValue: ''
};

function initPage(row: any) {
  sltCampusArea = row;
  findCampusAreaAndRptGroup();
}

function keyupRptCampusEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findRptCampusAreaList();
  }
}

function findRptCampusAreaList() {
  cloading.value = true;
  rptCampusList.length = 0; //放入数据前清空数据
  const url = '/lis/lab/rptCampusArea/findRptCampusAreaList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        searchValue: searchRptCampusForm.searchValue,
        campusCode: sltCampusArea.campusCode
      }
    })
    .then((res: any) => {
      rptCampusList.length = 0; //放入数据前清空数据
      rptCampusList.push(...res.data);
      cloading.value = false;
    })
    .catch((err: any) => {
      cloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function rptCampusRowClick({ row }: any) {
  const url = '/lis/lab/rptCampusArea/deleteRptCampusArea';
  proxy.$http
    .post(url, row)
    .then((res: any) => {
      if (res.status.code === 1) {
        findCampusAreaAndRptGroup(); // 获取检验仪器表格数据
        VxeMessage('移除成功', VxeNotifyType.success);
      } else {
        VxeMessage(res.status.msg, VxeNotifyType.error);
      }
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}

function deleteBatchRptCampus() {
  const sltrptCampuss = (proxy.$refs.rptCampusTableRef as any).getCheckboxRecords();
  if (!(sltrptCampuss.length > 0)) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    proxy
      .$confirm('确定要删除当前勾选的数据？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        const data = { labRptCampusAreaList: sltrptCampuss };
        const url = '/lis/lab/rptCampusArea/batchDeleteRptCampusArea';
        proxy.$http
          .post(url, data)
          .then((res: any) => {
            if (res.status.code === 1) {
              findCampusAreaAndRptGroup(); // 获取检验仪器表格数据
              VxeMessage('删除成功', VxeNotifyType.success);
            } else {
              VxeMessage(res.status.msg, VxeNotifyType.error);
            }
          })
          .catch((err: any) => {
            VxeMessage(err, VxeNotifyType.error);
          });
      })
      .catch((err: any) => {
        // VxeMessage(err, VxeNotifyType.error);
      });
  }
}
function findCampusAreaAndRptGroup() {
  findRptCampusAreaList();
  findRptGroupList();
}

function keyupRptGroupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findRptGroupList();
    findRptCampusAreaList();
  }
}

function findRptGroupList() {
  rloading.value = true;
  rptGroupList.length = 0; //放入数据前清空数据
  const url = '/lis/lab/rptCampusArea/getRptGroupsByCampus';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        searchValue: searchRptGroupForm.searchValue,
        campusCode: sltCampusArea.campusCode
      }
    })
    .then((res: any) => {
      rptGroupList.length = 0; //放入数据前清空数据
      rptGroupList.push(...res.data);
      rloading.value = false;
    })
    .catch((err: any) => {
      rloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function rptGroupRowClick({ row }: any) {
  const url = '/lis/lab/rptCampusArea/addRptCampusArea';
  let purposeItem = {
    campusCode: sltCampusArea.campusCode,
    rptGroup: row.rptGroup
  };
  proxy.$http
    .post(url, purposeItem)
    .then((res: any) => {
      VxeMessage('成功', VxeNotifyType.success);
      findCampusAreaAndRptGroup();
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}
</script>

<style lang="scss" scoped>
#supplierAppraiseDiv {
  height: 100%;

  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 5px 0 5px 5px;
  }

  //右侧质控项目表格
  .tableBody {
    height: calc(100% - 40px);
    background-color: $base-white;
  }
  .rightTable {
    height: calc(100% - 40px - 32px);
  }
  .msgDiv {
    margin-left: 5px;
    color: rgb(180, 28, 28);
  }
}
</style>